<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>鹿程智慧油站商户平台</title>
		<meta name="description" content="鹿程科技是提供加油站互联网化零管系统、营销及支付和大数据分析运营服务的行业领先科技公司。鹿程科技充分了解加油站行业的需求和新兴互联网的发展,依靠业内最先进的科技和标准化的运营,持续帮助油站业务发展创造价值。"/>
		<meta name="keywords" content="智慧油站,鹿程,鹿程智慧油站,鹿程智慧油站微信支付,加油站微信支付,加油站营销管理"/>
		<link rel="icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link rel="shortcut icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>
<body>
	<section class="section-right">
		<!--deer-tit-->
		<div class="deer-tit">
			<h3>交接班管理</h3>
			<h4>交接班列表</h4>
			<h5>添加交接班</h5>
		</div>
		<!--/deer-tit-->
		<!--deer-content-->
		<div class="deer-content">
			<table class="layui-table ware-table" lay-skin="line">
				<thead>
				    <tr>
		                <th>ID</th>
		                <th>班次名称</th>
		                <th>操作</th>
				    </tr> 
				</thead>
				<tbody>
				   	<tr>
				   		<td>54</td>
				   		<td>1</td>
				   		<td>
				   			<div class="ware-staff">
				   				<dl>操作<i class="fa fa-angle-down fa-5" aria-hidden="true"></i><input type="hidden" value="0"/></dl>
					   			<dt>
					   				<a href="#">编辑</a>
					   				<a href="#" onclick="deletes()">删除</a>
					   			</dt>
				   			</div>
				   		</td>
				   	</tr>
				</tbody>
			</table>
			<!--ware-bg-->
			<div class="mask"></div>
			<!--/ware-bg-->
		</div>
		<!--deer-content-->
	</section>
	
	<!--js-->
	<aside>
		
		<script type="text/javascript" src="../layui/layui.js" ></script>
		<script type="text/javascript">
			
			layui.use(['layer','jquery','element'],function(){
				var	layer=layui.layer;
				var $=layui.jquery;
				var element=layui.element;
				
				//点击显示隐藏
				$('.ware-staff>dl').bind('click',function(e){
					e.stopPropagation()//取消冒泡
					var	 num=$(this).index('.ware-staff>dl');	
					if($('.ware-staff>dl input').val()==0){
						$('.ware-staff>dt').eq(num).show()
						$('.ware-staff>dl').eq(num).addClass('ware-btnbg')
						$('.mask').show()
						$('.ware-staff>dl input').val(1)
					}else{
						$('.ware-staff>dt').hide()
						$('.ware-staff>dl input').val(0)
						$('.ware-staff>dl').removeClass('ware-btnbg')
						$('.mask').hide()
					}
				})
				//取消冒泡
				$('.ware-staff>dt').bind('click',function(e){
					e.stopPropagation()
				})
				//全局点击隐藏
				$(document).bind('click',function(){
					$('.ware-staff>dt').hide()
					$('.ware-staff>dl input').val(0)
					$('.mask').hide()
					$('.ware-staff>dl').removeClass('ware-btnbg')
				})
				
				//定义全局是删除框
				window.deletes=function(){
					layer.confirm('您确定要删除此班次吗？', {
					  	btn: ['确定','取消'] //按钮
					}, function(){
						//成功后执行的函数
					  	layer.msg('班次删除成功', {icon: 1});
					  	$('.ware-staff>dt').hide()
					}, function(){
						//失败后执行的函数
					 	layer.msg('您已经取消了操作',{icon: 0});
					 	$('.ware-staff>dt').hide()
					});
				}
				
				

        		
				
			})
			
		</script>
		
		
		
	</aside>
	<!--/js-->
</body>
</html>